<template>
  <div>
    <form ref="form" :id="formId" method="post" enctype="multipart/form-data">
      <input name="token" type="hidden" :value="token">
      <input name="file" :id="pickerId" type="file" @change="upload" :accept="accept" :multiple="multiple"/>
      <input name="accept" type="hidden"/>
      <slot name="form">
      </slot>
    </form>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data () {
      return {
        key: '',
        token: '9DY8saYD-rRp706KrXWf_m3UAQUqoL8tqdivZLem:ASUz4361EySfmIInKb9QpCsxfNU=:eyJzY29wZSI6ImltYWdlIiwiZGVhZGxpbmUiOjE1MTQ5MDY4ODl9',
        multiple: 'false',
        accept: 'image/png, image/jpeg, image/gif',
        formId: `upload${new Date().getTime()}`,
        pickerId: `picker${new Date().getTime()}`,
        action: 'http://upload.qiniu.com'
      }
    },
    mounted () {
    },
    methods: {
      upload () {
        console.log('111')
        let formData = new FormData(document.getElementById(this.formId))
        // let formData = new FormData(this.$refs.form)
        if (this.multiple) {
          let files = formData.getAll('file')
          formData.set('file', files[0])
          axios.post(this.action, formData).then(res => {
            console.log('1', res)
          })
        } else {
          this.$http.post(this.action, formData).then(res => {
            console.log('2', res)
          })
        }
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>

</style>
